<template>
    <div class="box " :class="isEvent?'blink':''" v-if="info">
        <div class="floatBtn">
            <el-button icon="el-icon-refresh" size="mini" type="text" @click="doQuery"></el-button>
            <el-popover placement="bottom" width="460" trigger="hover" v-if="info.c=='300869'">
                <el-row>1.开盘第一波没有拉出3个点,按盘整处理</el-row>
                    <el-row class="pl20">后续拉开振幅之前,收益见好就收30-60</el-row>
                <el-row>2.开盘几笔操作反了就先暂停不操作,看情况</el-row>
                <el-row>3.建议开盘强势时先买后卖,开盘后弱势则先卖后买,比较不容易反向操作</el-row>
                <el-row>4.分时/明细中出现明显放量时可以跟进</el-row>
                    <el-row class="pl20">分时图中明显比前几分钟的量能多出两三倍</el-row>
                    <el-row class="pl20">明细交易记录中从几手->几十手,一般能有100+的幅度</el-row>
                    <el-row class="pl20">明细交易记录中从几十->几百手,一般能有200-300的幅度</el-row>
                    <el-row class="pl20">明细交易记录出现连续的几百上千手,一般能有300+的幅度</el-row>
                <el-row>5.可参考稳健/博辉做一定的提前预判</el-row>
                <el-row class="pl20">走势比较相近的股票做参考</el-row>
                <el-row class="red">6.基础逻辑是上升后会下降,下降后会上升</el-row>
                    <el-row class="pl20">升的多降的多,降得多升的也会多</el-row>
                    <el-row class="pl20">其他信息做辅助尽量找出振幅大的小波段</el-row>
                <el-button slot="reference" icon="el-icon-s-flag" size="mini" type="text"></el-button>
            </el-popover>
            <el-popover placement="bottom" width="560" trigger="hover">
                <el-row v-for="(item,idx) in dfcfEventList" :key="idx" :class="item.color">
                    {{idx+1}}.{{item.time}}&nbsp;&nbsp;{{item.name}}&nbsp;&nbsp;详细信息:{{item.detail}}
                    &nbsp;&nbsp;最新价格:{{item.price}}&nbsp;&nbsp;涨幅:{{item.wave}}&nbsp;&nbsp;成交数量{{item.num}}
                </el-row>
                <el-button slot="reference" icon="el-icon-info" size="mini" type="text"></el-button>
            </el-popover>
            
        </div>
        <div class="title">{{info.n}}({{info.c}})</div>
        
        <div v-if="this.curInfo" class="price-info">
            <el-row v-for="(item) in [5,4,3,2,1]" :key="item+100">
                <span :class="curInfo.fivequote['scolor'+item]">
                    <el-col :span="8">卖{{item}}</el-col>
                    <el-col :span="8" >{{curInfo.fivequote["sale"+item]}}</el-col>
                    <el-col :span="8">{{curInfo.fivequote["sale"+item+"_count"]}}</el-col>
                </span>
            </el-row>
            <el-row class="bline"></el-row>
            <el-row v-for="(item) in [1,2,3,4,5]" :key="item">
                <span :class="curInfo.fivequote['bcolor'+item]">
                <el-col :span="8">买{{item}}</el-col>
                <el-col :span="8">{{curInfo.fivequote["buy"+item]}}</el-col>
                <el-col :span="8">{{curInfo.fivequote["buy"+item+"_count"]}}</el-col>
                </span>
            </el-row>
            <el-row class="bline"></el-row>
            <el-row>
                <el-col :span="12">
                    <span :class="getColor(curInfo.realtimequote.currentPrice,curInfo.fivequote.yesClosePrice)">
                        当前&nbsp;{{curInfo.realtimequote.currentPrice}}&nbsp;{{priceRate(curInfo.realtimequote.currentPrice,curInfo.fivequote.yesClosePrice)}}
                    </span>
                </el-col>
                <el-col :span="12">
                    <span :class="getColor(curInfo.realtimequote.open,curInfo.fivequote.yesClosePrice)">
                        开盘&nbsp;{{curInfo.realtimequote.open}}&nbsp;{{priceRate(curInfo.realtimequote.open,curInfo.fivequote.yesClosePrice)}}
                    </span>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <span class="red">
                        涨停&nbsp;{{curInfo.topprice}}&nbsp;
                    </span>
                </el-col>
                <el-col :span="8">
                    <span class="">
                        换手&nbsp;{{curInfo.realtimequote.turnover}}&nbsp;
                    </span>
                </el-col>
                <el-col :span="8">
                    <span class="green">
                        跌停&nbsp;{{curInfo.bottomprice}}&nbsp;
                    </span>
                </el-col>

                
            </el-row>
        </div>
        <div class="title">明细</div>
        <div class="list detailList" ref="detailEl">
            <el-row v-for="(item,idx) in detailList" :key="idx" class="mt2" :class="item.color">
                <!-- {{'detail'+witem.c+'El'}} -->
                <span class="colspan">{{item.col1}}</span>
                <span class="colspan ml5">{{item.col2}}</span>
                <span class="colspan ">{{item.col3}}</span>
            </el-row>
        </div>
        <div class="price-info mt5">{{info.n}}({{info.c}}) 昨:{{curInfo.fivequote.yesClosePrice}} 
            浮:{{(curInfo.realtimequote.currentPrice - curInfo.fivequote.yesClosePrice).toFixed(2)}}</div>
            
        <el-row v-if="this.curInfo" class="price-info ">
            <el-col :span="12">
                <span :class="getColor(curInfo.realtimequote.high,curInfo.fivequote.yesClosePrice)">
                    最高&nbsp;{{curInfo.realtimequote.high}}&nbsp;{{priceRate(curInfo.realtimequote.high,curInfo.fivequote.yesClosePrice)}}
                </span>
            </el-col>
            <el-col :span="12">
                <span :class="getColor(curInfo.realtimequote.low,curInfo.fivequote.yesClosePrice)">
                    最低&nbsp;{{curInfo.realtimequote.low}}&nbsp;{{priceRate(curInfo.realtimequote.low,curInfo.fivequote.yesClosePrice)}}
                </span>
            </el-col>
        </el-row>
    </div>
</template>

<script>

export default {
    props:["info"],
    data() {
        return {
            curDate: this.$dayjs().format("YYYYMMDD"),
            curInfo:{
                fivequote:{},
                realtimequote: {},
            },
            detailList:[],
            dfcfEventMap:{},
            dfcfEventList:[],
            isEvent : false,
            dfcfEventCfg:{
                1: { name: "顶级买单", color: "red", direction: 1, pair: 2, id: 1, type: 'sl' },
                2: { name: "顶级卖单", color: "green", direction: -1, pair: 1, id: 2, type: 'sl' },
                4: { name: "封涨停板", color: "red", direction: 1, pair: 8, id: 4, type: 'price' },
                8: { name: "封跌停板", color: "green", direction: -1, pair: 4, id: 8, type: 'price' },
                16: { name: "打开涨停板", color: "green", direction: -1, pair: 32, id: 16, type: 'price' },
                32: { name: "打开跌停板", color: "red", direction: 1, pair: 16, id: 32, type: 'price' },
                64: { name: "有大买盘", color: "red", direction: 1, pair: 128, id: 64, type: 'sl' },
                128: { name: "有大卖盘", color: "green", direction: -1, pair: 64, id: 128, type: 'sl' },
                256: { name: "机构买单", color: "red", direction: 1, pair: 512, id: 256, type: 'sl' },
                512: { name: "机构卖单", color: "green", direction: -1, pair: 256, id: 512, type: 'sl' },
                8193: { name: "大笔买入", color: "red", direction: 1, pair: 8194, id: 8193, type: 'sl' },
                8194: { name: "大笔卖出", color: "green", direction: -1, pair: 8193, id: 8194, type: 'sl' },
                8195: { name: "拖拉机买", color: "red", direction: 1, pair: 8196, id: 8195, type: 'sl' },
                8196: { name: "拖拉机卖", color: "green", direction: -1, pair: 8195, id: 8196, type: 'sl' },
                8201: { name: "火箭发射", color: "red", direction: 1, pair: 8204, id: 8201, type: 'change' },
                8202: { name: "快速反弹", color: "red", direction: 1, pair: 8203, id: 8202, type: 'change' },
                8203: { name: "高台跳水", color: "green", direction: -1, pair: 8202, id: 8203, type: 'change' },
                8204: { name: "加速下跌", color: "green", direction: -1, pair: 8201, id: 8204, type: 'change' },
                8205: { name: "买入撤单", color: "green", direction: -1, pair: 8026, id: 8205, type: 'sl' },
                8206: { name: "卖出撤单", color: "red", direction: 1, pair: 8205, id: 8206, type: 'sl' },
                8207: { name: "竞价上涨", color: "red", direction: 1, pair: 8208, id: 8207, type: 'change' },
                8208: { name: "竞价下跌", color: "green", direction: -1, pair: 8207, id: 8208, type: 'change' },
                8209: { name: "高开5日线", color: "red", direction: 1, pair: 8210, id: 8209, type: 'change' },
                8210: { name: "低开5日线", color: "green", direction: -1, pair: 8209, id: 8210, type: 'change' },
                8211: { name: "向上缺口", color: "red", direction: 1, pair: 8212, id: 8211, type: 'change' },
                8212: { name: "向下缺口", color: "green", direction: -1, pair: 8211, id: 8212, type: 'change' },
                8213: { name: "60日新高", color: "red", direction: 1, pair: 8214, id: 8213, type: 'price' },
                8214: { name: "60日新低", color: "green", direction: -1, pair: 8213, id: 8214, type: 'price' },
                8215: { name: "60日大幅上涨", color: "red", direction: 1, pair: 8216, id: 8215, type: 'change' },
                8216: { name: "60日大幅下跌", color: "green", direction: -1, pair: 8215, id: 8216, type: 'change' }
            }
        }
    },
    computed:{
    },
    watch:{
        info(){
            this.doQuery();
        }
    },

    inject: ['cfg',"isQry","getSleepTime","isMoneyException","addException"],
    mounted() {
        this.startTimer();
    },

    methods: {
        startTimer(){
            this.doQuery()
            this.$once('hook:beforeDestroy', () => {   
                clearTimeout(this.timer);
            })
            this.doTimer();
        },
        doTimer(){
            clearTimeout(this.timer);
            if(this.isQry()){
                this.doQuery()
            }
            var sleep = this.cfg.sleepTime|| this.$config.defSleepTime;
            if(sleep<1000 || isNaN(sleep)) sleep = this.$config.defSleepTime;

            this.timer = setTimeout(()=>{
                this.doTimer();
            },sleep);
        },
        doQuery(){
            this.getStep5Price()
            this.getDetail()
            this.getDFCFEvent();
        },
        getStep5Price(){
            this.$axios.get(`https://hsmarket.eastmoney.com/api/SHSZQuoteSnapshot?callback=&id=${this.info.c}`)
            .then((res) => {
                res.data = res.data.substring(1,res.data.length-2);
                res.data = JSON.parse(res.data);
                if (res.data.status == 0) {
                    this.isNewPoint(res.data);
                    this.isZtSale(res.data);
                    this.curInfo = res.data;



                    this.curInfo.fivequote.scolor1=this.getColor(this.curInfo.fivequote.sale1,this.curInfo.fivequote.yesClosePrice)
                    this.curInfo.fivequote.scolor2=this.getColor(this.curInfo.fivequote.sale2,this.curInfo.fivequote.yesClosePrice)
                    this.curInfo.fivequote.scolor3=this.getColor(this.curInfo.fivequote.sale3,this.curInfo.fivequote.yesClosePrice)
                    this.curInfo.fivequote.scolor4=this.getColor(this.curInfo.fivequote.sale4,this.curInfo.fivequote.yesClosePrice)
                    this.curInfo.fivequote.scolor5=this.getColor(this.curInfo.fivequote.sale5,this.curInfo.fivequote.yesClosePrice)
                    
                    this.curInfo.fivequote.bcolor1=this.getColor(this.curInfo.fivequote.buy1,this.curInfo.fivequote.yesClosePrice)
                    this.curInfo.fivequote.bcolor2=this.getColor(this.curInfo.fivequote.buy2,this.curInfo.fivequote.yesClosePrice)
                    this.curInfo.fivequote.bcolor3=this.getColor(this.curInfo.fivequote.buy3,this.curInfo.fivequote.yesClosePrice)
                    this.curInfo.fivequote.bcolor4=this.getColor(this.curInfo.fivequote.buy4,this.curInfo.fivequote.yesClosePrice)
                    this.curInfo.fivequote.bcolor5=this.getColor(this.curInfo.fivequote.buy5,this.curInfo.fivequote.yesClosePrice)
                } else {
                    this.$message.error(res.data.message);
                }
            })
        },
        getDetail(){
            var code = this.info.c;
            var that = this;
            var first = code.substring(0,1);
            if(first=="0" || first=="3" || first=="1"){
                code = "0."+code;
            }else {
                code = "1."+code;
            }
            this.$axios.get(`http://push2.eastmoney.com/api/qt/stock/details/get?fields1=f1,f2,f3,f4&fields2=f51,f52,f53,f54,f55&pos=-61&secid=${code}`)
            .then((res) => {
                if(res.data && res.data.data && res.data.data.details){
                    var datas = res.data.data.details;
                    var prePrice = res.data.data.prePrice;
                    var last = datas[datas.length-1];
                    if(!last){
                        if(prePrice){
                            this.info.p = prePrice;
                            this.info.r = 0;
                        }
                        return;
                    }
                    var arr = last.split(",");
                    
                    if(!this.cfg.kplMode){
                        this.info.p = arr[1];
                        this.info.r  = this.rateCount(arr[1]-prePrice,prePrice);
                        this.info.r = this.info.r.toFixed(2);
                        this.info.r = this.info.r*1;
                    }
                    this.info.prePrice = prePrice*1;

                    if(!this.info.watch) return;
                    // datas = datas.reverse();
                    var list = [];
                    var preItem=null;
                    datas.map((obj,idx)=>{
                        var arr = obj.split(",");
                        var item = {
                            col1: arr[0],
                            col2: arr[1],
                            col3: arr[2]
                        }
                        if(item.col1>"15:01:00")return;
                        list.push(item);
                        if(preItem){
                            item.color=this.getColor(item.col2,preItem.col2);
                        }
                        preItem = item
                    });
                    this.detailList = list;
                    this.isDetailException(list);
                    this.$nextTick(()=>{
                        var el = this.$refs['detailEl'];
                        if(!el) return;
                        // el = el[0]
                        el.scrollTop = el.scrollHeight;
                    });
                }else{
                    this.$message.error(JSON.stringify(res.data));
                }
            })
        },
        getSec(time){
            var arr = time.split(":");
            return arr[0]*3600+arr[1]*60+arr[2]*1;
        },
        isDetailException(list){
            if(!this.cfg.event.detail_wave) return;
            if(this.detailExpTime){
                var cur =  new Date().getTime();
                if(cur-this.detailExpTime<10000) return;
            };
            var detectWave = this.cfg.wave;
            if(detectWave<0.5){
                detectWave = 0.5;
            }
            var last = list[list.length-1];
            last.sec=this.getSec(last.col1)
            var diffTime = this.cfg.diffTime || 60;
            if(diffTime<30) diffTime = 30;
            for(var i=0;i<list.length-1;i++){
                var item = list[i];
                item.sec=this.getSec(item.col1)
                var diffSec = last.sec-item.sec;
                if(diffSec>diffTime) continue;
                var wave = this.getRise(last.col2,item.col2);
                if(Math.abs(wave)>=detectWave){
                    var color = this.getRateColor(wave);
                    var curRate = this.getRise(last.col2,this.info.prePrice);
                    var msg = `<span class='${color}'>${this.info.n}&nbsp;(${this.info.c})<br/>&nbsp;&nbsp;&nbsp;&nbsp;wave:&nbsp;&nbsp;${wave}%<br/>${last.col2}&nbsp;(${curRate}%)<br/>${item.col1}->${last.col1}<br/>${item.col2}->${last.col2}</span>`
                    if(this.addException(msg,wave>0)){
                        this.detailExpTime = new Date().getTime();
                        this.showEvent();
                        return;
                    }
                }
            }
            this.isBigTrade(list);
        },
        isBigTrade(list){
            if(!this.cfg.event.detail_num) return;
            if(list.length<10) return;
            
            if(list[list.length-1].col1<"09:30:00")return;
            if(this.bigTradeTime){
                var cur =  new Date().getTime();
                if(cur-this.bigTradeTime<30000) return;
            };
            var low = (this.cfg.event.detail_num_low && this.cfg.event.detail_num_low>100)? this.cfg.event.detail_num_low:500;
            var high = (this.cfg.event.detail_num_high && this.cfg.event.detail_num_high>50)? this.cfg.event.detail_num_high:100;
            var baseNum = this.info.prePrice>100?100:500;
            var count = 0;
            for(var i=list.length-1;i>=list.length-11;i--){
                var item = list[i];
                if(!item.col3) continue;
                var amount = item.col3*1;
                if(amount>baseNum)count++;
            }
            if(count>3){
                var last = list[list.length-1];
                var first = list[list.length-11];
                var wave = this.getRise(last.col2,this.info.prePrice);
                var color = this.getRateColor(wave);
                var msg = `<span class='blue'>${this.info.n}&nbsp;(${this.info.c})<br/>&nbsp;&nbsp;&nbsp;&nbsp;curwave:&nbsp;&nbsp;${wave}%<br/>放量ing&nbsp;${count}<br/>${item.col1}->${last.col1}</span>`
                if(this.addException(msg,wave>0)){
                    this.bigTradeTime = new Date().getTime();
                    this.showEvent();
                    return;
                }
            }

        },
        isNewPoint(lastinfo){
            if(!this.cfg.event.detail_newpoint) return;
            if(this.newPointTime){
                var cur =  new Date().getTime();
                if(cur-this.newPointTime<20000) return;
            };
            if(lastinfo.realtimequote.time<"09:35:00"){
                return;
            }
            var color="",wave = "",name="",price="";
            if(this.curInfo.realtimequote.high<lastinfo.realtimequote.high){
                price = lastinfo.realtimequote.high;
                name="新高"
                color = "red";
                wave = this.priceRate(lastinfo.realtimequote.high,lastinfo.fivequote.yesClosePrice)
            }else if(this.curInfo.realtimequote.low>lastinfo.realtimequote.low){
                price = lastinfo.realtimequote.low;
                name="新低"
                color = "green";
                wave = this.priceRate(lastinfo.realtimequote.low,lastinfo.fivequote.yesClosePrice)
            }
            if(!name) return;
            var time = lastinfo.realtimequote.time;
            var msg = `<span class='${color}'>${lastinfo.name}&nbsp;(${lastinfo.code})<br/>${time}<br/>${name}<br/>&nbsp;&nbsp;${price}&nbsp;&nbsp;${wave}</span>`
            if(this.addException(msg,wave>0)){
                this.newPointTime = new Date().getTime();
                this.showEvent();
                return;
            }
        },
        //涨停板挂单大幅变动提示
        isZtSale(lastinfo){
            if(!this.cfg.event.detail_zt_num) return;
            if(this.curInfo.topprice && this.curInfo.topprice  == this.curInfo.realtimequote.currentPrice
                && lastinfo.topprice  == lastinfo.realtimequote.currentPrice
                ){
                    var diff=lastinfo.fivequote.buy1 - this.curInfo.fivequote.buy1;
                    var basediff = (this.cfg.event.detail_zt_num_diff && this.cfg.event.detail_zt_num_diff>=500)? this.cfg.event.detail_zt_num_diff: 500;
                    // console.log("涨停板挂单变量="+diff)
                    if(Math.abs(diff)>=1000){
                        var color="",wave = "",name="",price="";
                        if(diff>0){
                            name="增加"
                            color = "red";
                        }else if(diff<0){
                            name="减少"
                            color = "green";
                        }
                        var time = lastinfo.realtimequote.time;
                        var msg = `<span class='${color}'>${lastinfo.name}&nbsp;(${lastinfo.code})<br/>${time}<br/>涨停板挂单<br/>${name}&nbsp;&nbsp;${diff}`
                        if(this.addException(msg)){
                            this.showEvent();
                            return;
                        }
                    }
            }

        },

        priceRate(cur,pre){
            return this.rateFormat(cur-pre,pre)
        },
        getDFCFEvent(){
            if(!this.cfg.event.detail_dfcf) return;
            var code = this.info.c;
            var that = this;
            var first = code.substring(0,1);
            var market = 1;
            if(first=="0" || first=="3" || first=="1"){
                market = 0;
            }
            this.$axios.get(`http://push2ex.eastmoney.com/getStockChanges?code=${this.info.c}&market=${market}&date=${this.curDate}&ut=7eea3edcaed734bea9cbfc24409ed989&dpt=wzchanges&_=1608183792212`)
            .then((res) => {
                if(res.data && res.data.data && res.data.data.data){
                    var list = res.data.data.data;
                    var eventItem = null;
                    for(var i=0;i<list.length;i++){
                        var item = list[i];
                        var cfg = this.dfcfEventCfg[item.t]
                        if(!cfg) continue;
                        var key = item.tm+"_"+item.t;
                        if(this.dfcfEventMap[key]){ //已登记
                            break;
                        }
                        this.dfcfEventMap[key] = key;
                        var detail = "";
                        if(cfg.type=="sl"){
                            detail = "数量 "+ (item.i*1/100).toFixed(0) +"手"
                        }else if(cfg.type=="price"){
                            detail= "价格 " + (item.i*1)
                        }else if(cfg.type=="change"){
                            detail= "幅度 " + (item.i*100).toFixed(2) +"%"
                        }
                        item.p = (item.p/1000).toFixed(2)
                        var tmpInfo = {time:item.tm,name:cfg.name,color:cfg.color,detail:detail,price:item.p,wave:item.u,num:item.v,type:item.t};
                        if(!eventItem) eventItem = tmpInfo
                        this.dfcfEventList.push(tmpInfo);
                    }
                    if(eventItem){
                        var msgType = (eventItem.type==4 || eventItem.type==16)?"big":"";
                        var time = eventItem.time;
                        var sec = (time%100).toFixed(0);
                        if(sec<10) sec="0"+sec;
                            time = time/100;
                        var min = (time%100).toFixed(0);
                        if(min<10) min="0"+min;
                        var hour = Math.floor(time/100);
                        if(hour<10) hour="0"+hour;
                            time = hour+":"+min+":"+sec;
                        var curhour = new Date().getHours();
                        if(curhour-hour*1>2){
                            return;
                        }
                        var msg = `<span class='${eventItem.color}'>
                            ${this.info.n}&nbsp;(${this.info.c})<br/>
                            东财异动:&nbsp;${eventItem.name}<br/>
                            时间:&nbsp;${time}<br/>
                            ${eventItem.detail}<br/>
                            &nbsp;&nbsp;${eventItem.price}&nbsp;&nbsp;${eventItem.wave}%<br/>
                            &nbsp;&nbsp;成交量:&nbsp; ${eventItem.num}
                            </span>`
                        if(this.addException(msg,eventItem.wave>0,msgType)){
                            // this.dfcfEventTime = new Date().getTime();
                            this.showEvent();
                            return;
                        }
                    }
                }
            })
        },
        showEvent(){
            this.isEvent = true;
            clearTimeout(this.eventTimer);
            this.eventTimer = setTimeout(()=>{
                this.isEvent = false
            },5000)
        }
    }
}
</script>

<style lang="less" scoped>


/* 定义keyframe动画，命名为blink */
@keyframes blink{
  0%{background: white}
  50%{background: lightblue}
  100%{background: white} 
}
/* 定义blink类*/
.blink{
    animation: blink 1s linear infinite;  
    /* 其它浏览器兼容性前缀 */
    -webkit-animation: blink 1s linear infinite;
    -moz-animation: blink 1s linear infinite;
    -ms-animation: blink 1s linear infinite;
    -o-animation: blink 1s linear infinite;
}
</style>
